<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {

            height: 100%;
            display: block;
        }

        * {
            margin: 0px;
            box-sizing: border-box;
        }

        .background {
            height: 100%;
            width: 100%;
            background-image: url(IMAGE/illust_88682446_20220327_013850.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .background2 {
            background-color: azure;
            opacity: 0.8;
            height: 96%;
            width: 60%;
        }

        .content1 {
            display: flex;
            flex-direction: column;
            justify-content: left;
            padding: 8px;
        }

        .content1 h1 {
            padding-left: 20px;

        }

        .content1 a {
            padding-left: 20px;

        }

        .content2 {
            display: flex;
            flex-direction: row;
        }

        .main {
            display: flex;
            width: 80%;
            margin-left: 20px;
            flex-direction: column;
            padding-top: 30px;
        }

        .formitem {
            display: flex;
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .formitem-right {
            flex: 1;
        }

        .formitem-label {
            width: 5em;
            /* 指最多八个字间隔 */
        }

        .formiteminput {
            background-color: cornsilk;
            width: 100%;
        }

        .formitem-right1 {
            display: flex;
            flex: 1;
        }

        .button1 {
            background-color: blue;
            color: white;
            border: 0;
            border-radius: 4px;
            cursor: pointer;
            border: 1px black solid;
        }

        .button1:hover {
            background-color: rgb(240, 107, 5);
        }

        .formitem1 {
            display: flex;
            width: 100%;
            margin-bottom: 15px;
            margin-top: 15px;
            flex-direction: column;
        }

        .button2 {
            background-color: blue;
            color: white;
            border-radius: 6px;
            cursor: pointer;
            border: 1px black solid;
            width: 100%;
            height: 30px;
        }

        .button2:hover {
            background-color: rgb(240, 107, 5);
        }

    </style>
</head>

<body>
    <div class="background">
        <div class="background2">
            <div class="content1">
                <h1 style="font-size: 40px;">欢迎注册</h1>
                <div class="content2">
                    <h1 style="font-size: 15px; color: black;">已有帐号?</h1>
                    <a href="#" style="color: blue;font-size: 15px;">登录</a>
                    <img src="E:\grts-mms\front\IMAGE" alt="">
                </div>
            </div>

            <div class="main">
                <div class="formitem">
                    <label class="formitem-label" for="" style="padding-right: 5px;">用户名</label>
                    <div class="formitem-right">
                        <input class="formiteminput" type="text" id=""  placeholder="请设置用户名">
                    </div>
                    <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
                </div>
                <div class="formitem">
                    <label class="formitem-label" for="" style="padding-right: 5px;">手机号</label>
                    <div class="formitem-right">
                        <input class="formiteminput" type="text" id=""  placeholder="用于登录和找回密码">
                    </div>
                    <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
                </div>
                <div class="formitem">
                    <label class="formitem-label" for="" style="padding-right: 5px;">密码</label>
                    <div class="formitem-right">
                        <input class="formiteminput" type="password" id=""  placeholder="请设置登陆密码">
                    </div>
                    <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
                </div>
                <div class="formitem">
                    <label class="formitem-label" for="">验证码</label>
                    <div class="formitem-right1">
                        <input style="flex: 2;" class="formiteminput" type="text" id="" 
                            placeholder="请输入验证码">
                        <button style="flex: 1;  font-size: 5px;" class="button1">获取验证码</button>
                    </div>
                    <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
                </div>
                <div class="formitem1">
                    <button class="button2">注册</button>
                    <label>
                        <!-- 另外一种使用方式 -->
                        <input type="checkbox" > 阅读并接受<a href="#">《百度用户协议》</a>和<a href="#">《百度隐私权保护》</a>
                    </label>
                </div>
                <!-- 分析结构的时候，养成将所有多个元素可能存在的位置设立单独的div容器的习惯  -->
            </div>
        </div>
    </div>
    </div>
</body>

</html>